<template>
  <view v-if="!isLoading" class="container">
    <!-- 商品详情 -->
    <view class="goods-detail b-f dis-flex flex-dir-row">
      <view class="left">
        <image
          mode="aspectFill"
          class="goods-image"
          :src="goods.goods_image"
        ></image>
      </view>
      <view class="right dis-flex flex-box flex-dir-column flex-x-around">
        <view class="goods-name">
          <text class="twoline-hide">{{ goods.goods_name }}</text>
        </view>
        <view class="dis-flex col-9 f-24">
          <view class="flex-box">
            <view class="goods-props clearfix">
              <view
                class="goods-props-item"
                v-for="(props, idx) in goods.goods_props"
                :key="idx"
              >
                <text>{{ props.value.name }}</text>
              </view>
            </view>
          </view>
          <text class="t-r">×{{ goods.total_num }}</text>
        </view>
      </view>
    </view>

    <!-- 服务类型 -->
    <!-- <view class="row-service b-f m-top20">
      <view class="row-title">服务类型</view>
      <view class="service-switch dis-flex">
        <view class="switch-item" v-for="(item, index) in RefundTypeEnum.data" :key="index" :class="{ active: formData.type == item.value }"
          @click="onSwitchService(item.value)">{{ item.name }}</view>
      </view>
    </view> -->
    <view class="row-service b-f m-top20">
      <jp-select-plus
        label="申请原因"
        placeholder="请选择"
        @toConfirm="toConfirm"
        v-model="va2"
        :listData="listc"
        :list="listc"
      ></jp-select-plus>
    </view>
    <view class="row-service b-f m-top20">
      <zyTag
        v-for="(item, index) in tagMultiList"
        :text="item.text"
        v-bind:theme="item.checked === true ? 'dark' : 'plain'"
        @click="multiHandle(item, index)"
      />
    </view>
    <!-- 申请原因 -->
    <!-- <view class="row-textarea b-f m-top20">
      <view class="row-title">申请原因</view>
      <view class="content">
        <textarea class="textarea" v-model="formData.content" maxlength="2000" placeholder="请详细填写申请原因，注意保持商品的完好，建议您先与卖家沟通"
          placeholderStyle="color:#ccc"></textarea>
      </view>
    </view> -->

    <!-- 退款金额 -->
    <view
      v-if="formData.type == RefundTypeEnum.RETURN.value"
      class="row-money b-f m-top20 dis-flex"
    >
      <view class="row-title">退款金额</view>
      <view class="money col-m">￥{{ goods.total_pay_price }}</view>
    </view>

    <!-- 上传凭证 -->
    <view class="row-voucher b-f m-top20">
      <view class="row-title">上传凭证 (最多6张)</view>
      <view class="image-list">
        <!-- 图片列表 -->
        <view
          class="image-preview"
          v-for="(image, imageIndex) in imageList"
          :key="imageIndex"
        >
          <text
            class="image-delete iconfont icon-shanchu"
            @click="deleteImage(imageIndex)"
          ></text>
          <image class="image" mode="aspectFill" :src="image.path"></image>
        </view>
        <!-- 上传图片 -->
        <view
          v-if="imageList.length < maxImageLength"
          class="image-picker"
          @click="chooseImage()"
        >
          <text class="choose-icon iconfont icon-camera"></text>
          <text class="choose-text">上传图片</text>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="footer-fixed">
      <view class="btn-wrapper">
        <view
          class="btn-item btn-item-main"
          :class="{ disabled }"
          @click="handleSubmit()"
          >确认提交</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import { RefundTypeEnum } from "@/common/enum/order/refund";
import zyTag from "@/uni_modules/zy-tag/components/zy-tag/zy-tag.vue";

import * as UploadApi from "@/api/upload";
import * as RefundApi from "@/api/refund";

const maxImageLength = 6;

export default {
  components: {
    zyTag,
  },
  data() {
    return {
      // 枚举类
      RefundTypeEnum,
      // 正在加载
      isLoading: true,
      // 订单商品id
      orderGoodsId: null,
      // 订单商品详情
      goods: {},
      // 表单数据
      formData: {
        // 图片上传成功的文件ID集
        images: [],
        // 服务类型
        type: 10,
        // 申请原因
        content: "",
      },
      // 用户选择的图片列表
      imageList: [],
      // 最大图片数量
      maxImageLength,
      // 按钮禁用
      disabled: false,
      va2: [],
      va3: [],
      tagMultiList: [],
      tagMultiList1: [
        [
          {
            text: "额外增加使用条件",
            checked: false,
          },
          {
            text: "商家不承认团购",
            checked: false,
          },
          {
            text: "商品下架/活动结束",
            checked: false,
          },
          {
            text: "核销机器坏了/核销异常",
            checked: false,
          },
          {
            text: "团购券过期",
            checked: false,
          },
          {
            text: "其他",
            checked: false,
          },
        ],
        [
          {
            text: "找不到门店",
            checked: false,
          },
          {
            text: "电话号码为空/错误/停机",
            checked: false,
          },
          {
            text: "商家不接电话",
            checked: false,
          },
          {
            text: "商家在线客服不回复",
            checked: false,
          },
          {
            text: "没有商家联系入口",
            checked: false,
          },
          {
            text: "其他",
            checked: false,
          },
        ],
        [
          {
            text: "商品已下架",
            checked: false,
          },
          {
            text: "商品已售罄/无现货",
            checked: false,
          },
          {
            text: "套餐部分商品售馨",
            checked: false,
          },
          {
            text: "套餐内赠品售罄",
            checked: false,
          },
          {
            text: "其他",
            checked: false,
          },
        ],
        [
          {
            text: "使用其他团购APP交易",
            checked: false,
          },
          {
            text: "使用微信、支付宝、现金交易",
            checked: false,
          },
          {
            text: "抖音重新下单交易",
            checked: false,
          },
          {
            text: "其他支付方式",
            checked: false,
          },
        ],
        [
          {
            text: "服务内容与购买时不一致",
            checked: false,
          },
          {
            text: "实际店铺地址与平台展示不一致",
            checked: false,
          },
          {
            text: "其他",
            checked: false,
          },
        ],
        [
          {
            text: "排队时间太久",
            checked: false,
          },
          {
            text: "预约不上位置或服务",
            checked: false,
          },
          {
            text: "其他",
            checked: false,
          },
        ],
        [
          {
            text: "店里更优惠",
            checked: false,
          },
          {
            text: "其他平台更优惠",
            checked: false,
          },
          {
            text: "抖音降价了",
            checked: false,
          },
          {
            text: "商品折扣力度小",
            checked: false,
          },
          {
            text: "其他",
            checked: false,
          },
        ],
      ],
      listc: [
        [
          {
            code: "买多了/买错了/不需要了",
            name: "买多了/买错了/不需要了",
          },
          {
            name: "没看清楚使用规则，要用时才发现有限制",
            code: "没看清楚使用规则，要用时才发现有限制",
          },
        ],
        [
          {
            name: "商家营业但不接待",
            code: "商家营业但不接待",
          },
          {
            name: "商家停业/装修/转让",
            code: "商家停业/装修/转让",
          },
          {
            name: "需要加价/购买其他产品才能用",
            code: "需要加价/购买其他产品才能用",
          },
          {
            name: "电话/发消息联系不上商家",
            code: "电话/发消息联系不上商家",
          },
          {
            name: "商品缺货/无货",
            code: "商品缺货/无货",
          },
          {
            name: "商家引导改用其他方式付款",
            code: "商家引导改用其他方式付款",
          },
          {
            name: "实际与宣传/描述不一样",
            code: "实际与宣传/描述不一样",
          },
          {
            name: "商家服务态度差",
            code: "商家服务态度差",
          },
          {
            name: "团购体验/效果不满意",
            code: "团购体验/效果不满意",
          },
        ],
        [
          {
            name: "排队太久/预约不上位置、服务人员等",
            code: "排队太久/预约不上位置、服务人员等",
          },
          {
            name: "商品买贵了或降价",
            code: "商品买贵了或降价",
          },
          {
            name: "朋友/网上评价不好",
            code: "朋友/网上评价不好",
          },
          {
            name: "距离过远商家无法服务",
            code: "距离过远商家无法服务",
          },
          {
            name: "担心安全/天气等问题",
            code: "担心安全/天气等问题",
          },
          {
            name: "其他",
            code: "其他",
          },
        ],
      ],
      listd: [
        {
          code: "买多了/买错了/不需要了",
          name: "买多了/买错了/不需要了",
        },
        {
          name: "没看清楚使用规则，要用时才发现有限制",
          code: "没看清楚使用规则，要用时才发现有限制",
        },
        {
          name: "商家营业但不接待",
          code: "商家营业但不接待",
        },
        {
          name: "商家停业/装修/转让",
          code: "商家停业/装修/转让",
        },
        {
          name: "需要加价/购买其他产品才能用",
          code: "需要加价/购买其他产品才能用",
        },
        {
          name: "电话/发消息联系不上商家",
          code: "电话/发消息联系不上商家",
        },
        {
          name: "商品缺货/无货",
          code: "商品缺货/无货",
        },
        {
          name: "商家引导改用其他方式付款",
          code: "商家引导改用其他方式付款",
        },
        {
          name: "实际与宣传/描述不一样",
          code: "实际与宣传/描述不一样",
        },
        {
          name: "商家服务态度差",
          code: "商家服务态度差",
        },
        {
          name: "团购体验/效果不满意",
          code: "团购体验/效果不满意",
        },
        {
          name: "排队太久/预约不上位置、服务人员等",
          code: "排队太久/预约不上位置、服务人员等",
        },
        {
          name: "商品买贵了或降价",
          code: "商品买贵了或降价",
        },
        {
          name: "朋友/网上评价不好",
          code: "朋友/网上评价不好",
        },
        {
          name: "距离过远商家无法服务",
          code: "距离过远商家无法服务",
        },
        {
          name: "担心安全/天气等问题",
          code: "担心安全/天气等问题",
        },
        {
          name: "其他",
          code: "其他",
        },
      ],
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad({ orderGoodsId }) {
    this.orderGoodsId = orderGoodsId;
    // 获取订单商品详情
    this.getGoodsDetail();
  },

  methods: {
    // 获取订单商品详情
    getGoodsDetail() {
      const app = this;
      app.isLoading = true;
      RefundApi.goods(app.orderGoodsId).then(
        (result) => {
          app.goods = result.data.goods;
          app.isLoading = false;
        },
        (error) => {
          setTimeout(() => {
            uni.navigateBack();
          }, 2500);
        }
      );
    },
    toConfirm(obj) {
      console.log("vv");
      console.log(obj);
      this.va3 = [];
      this.va3.push(obj);
      this.tagMultiList = [];
      if (obj == "商家营业但不接待") {
        this.tagMultiList = this.tagMultiList1[0];
      }
      if (obj == "电话/发消息联系不上商家") {
        this.tagMultiList = this.tagMultiList1[1];
      }
      if (obj == "商品缺货/无货") {
        this.tagMultiList = this.tagMultiList1[2];
      }
      if (obj == "商家引导改用其他方式付款") {
        this.tagMultiList = this.tagMultiList1[2];
      }
      if (obj == "实际与宣传/描述不一样") {
        this.tagMultiList = this.tagMultiList1[4];
      }
      if (obj == "排队太久/预约不上位置、服务人员等") {
        this.tagMultiList = this.tagMultiList1[5];
      }
      if (obj == "商品买贵了或降价") {
        this.tagMultiList = this.tagMultiList1[6];
      }
    },
    multiHandle(item, index) {
      this.tagMultiList.map((item, ind) => {
        this.tagMultiList[ind].checked = false;
      });
      this.tagMultiList[index].checked = !this.tagMultiList[index].checked;
    },
    // 切换类型
    onSwitchService(value) {
      this.formData.type = value;
    },

    // 选择图片
    chooseImage() {
      const app = this;
      const oldImageList = app.imageList;
      // 选择图片
      uni.chooseImage({
        count: maxImageLength - oldImageList.length,
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success({ tempFiles }) {
          // tempFiles = [{path:'xxx', size:100}]
          app.imageList = oldImageList.concat(tempFiles);
        },
      });
    },

    // 删除图片
    deleteImage(imageIndex) {
      this.imageList.splice(imageIndex, 1);
    },

    // 表单提交
    handleSubmit() {
      const app = this;
      const { imageList } = app;
      // 判断是否重复提交
      if (app.disabled === true) return false;
      // 按钮禁用
      app.disabled = true;
      // 判断是否需要上传图片
      if (imageList.length > 0) {
        app
          .uploadFile()
          .then(() => app.onSubmit())
          .catch((err) => {
            app.disabled = false;
            if (err.statusCode !== 0) {
              app.$toast(err.errMsg);
            }
            console.log("err", err);
          });
      } else {
        app.onSubmit();
      }
    },

    // 提交到后端
    onSubmit() {
      const app = this;
      if (app.va3.length == 0) {
        app.$toast("请选择退款原因");
        app.disabled = false;
        return;
      }
      RefundApi.apply(app.orderGoodsId, app.formData)
        .then((result) => {
          console.log(result);
		  const itemOrderList = [];
		  app.goods.itemOrderList.forEach(itemOrder=>{
			  itemOrderList.push({
				  itemOrderId:itemOrder.item_order_id,
				  refundAmount:itemOrder.refund_amount
			  })
		  });
          tt.applyRefund({
            refundInfo: {
              reason: app.va3,
            },
            outOrderNo: app.goods.orderM.order_id + "",
			itemOrderList,
            // itemOrderList: [
            //   {
            //     itemOrderId: app.goods.orderM.douyin_order_item_id,
            //     refundAmount: app.goods.orderM.pay_price * 100,
            //   },
            // ],

            callbackData: { test: result.refund_id },
            success: (res) => {
              const { orderId, outRefundNo, refundId } = res;
              console.log("申请退款成功");
              app.$toast("申请退款成功");
              console.log(
                "orderId",
                orderId,
                "outRefundNo",
                outRefundNo,
                "refundId",
                refundId
              );
              setTimeout(() => {
                app.disabled = false;
                uni.navigateBack();
              }, 1500);
            },
            fail: (res) => {
              const { errNo, errMsg, errLogId } = res;
              app.$toast("申请失败");
              console.log("申请失败", errNo, errMsg, errLogId);
              setTimeout(() => {
                app.disabled = false;
                uni.navigateBack();
              }, 1500);
            },
          });
        })
        .catch((err) => {
          app.disabled = false;
          console.log(err);
        });
    },
    // 上传图片
    uploadFile() {
      const app = this;
      const { imageList } = app;
      // 批量上传
      return new Promise((resolve, reject) => {
        if (imageList.length > 0) {
          UploadApi.image(imageList)
            .then((fileIds) => {
              app.formData.images = fileIds;
              resolve(fileIds);
            })
            .catch(reject);
        } else {
          resolve();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: constant(env(safe-area-inset-bottom) + 130rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 130rpx);
}

.row-title {
  color: #888;
  margin-bottom: 20rpx;
}

// 商品信息
.goods-detail {
  padding: 24rpx 20rpx;

  .left {
    .goods-image {
      display: block;
      width: 150rpx;
      height: 150rpx;
    }
  }

  .right {
    padding-left: 20rpx;
  }

  .goods-props {
    margin-top: 14rpx;
    height: 40rpx;
    color: #ababab;
    font-size: 24rpx;
    overflow: hidden;

    .goods-props-item {
      display: inline-block;
      margin-right: 14rpx;
      padding: 4rpx 16rpx;
      border-radius: 12rpx;
      background-color: #f5f5f5;
      width: auto;
    }
  }
}

/* 服务类型 */
.row-service {
  padding: 24rpx 20rpx;
}

.service-switch {
  .switch-item {
    padding: 6rpx 30rpx;
    margin-right: 25rpx;
    border-radius: 10rpx;
    border: 1px solid rgb(177, 177, 177);
    color: #888;

    &.active {
      color: #fc1e56;
      border: 1px solid #fc1e56;
    }
  }
}

/* 申请原因 */
.row-textarea {
  padding: 24rpx 20rpx;

  .textarea {
    width: 100%;
    height: 220rpx;
    padding: 12rpx;
    border: 1rpx solid #e8e8e8;
    border-radius: 5rpx;
    box-sizing: border-box;
    font-size: 26rpx;
  }
}

/* 退款金额 */
.row-money {
  padding: 24rpx 20rpx;

  .row-title {
    margin-bottom: 0;
    margin-right: 30rpx;
  }
}

// 上传凭证
.row-voucher {
  padding: 24rpx 20rpx;

  .image-list {
    padding: 0 20rpx;
    margin-top: 20rpx;
    margin-bottom: -20rpx;

    &:after {
      clear: both;
      content: " ";
      display: table;
    }

    .image {
      display: block;
      width: 100%;
      height: 100%;
    }

    .image-picker,
    .image-preview {
      width: 184rpx;
      height: 184rpx;
      margin-right: 30rpx;
      margin-bottom: 30rpx;
      float: left;

      &:nth-child(3n + 0) {
        margin-right: 0;
      }
    }

    .image-picker {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 1rpx dashed #ccc;
      color: #ccc;

      .choose-icon {
        font-size: 48rpx;
        margin-bottom: 6rpx;
      }

      .choose-text {
        font-size: 24rpx;
      }
    }

    .image-preview {
      position: relative;

      .image-delete {
        position: absolute;
        top: -15rpx;
        right: -15rpx;
        height: 42rpx;
        width: 42rpx;
        line-height: 42rpx;
        background: rgba(0, 0, 0, 0.64);
        border-radius: 50%;
        color: #fff;
        font-weight: bolder;
        font-size: 22rpx;
        z-index: 10;
        text-align: center;
      }
    }
  }
}

// 底部操作栏
.footer-fixed {
  position: fixed;
  bottom: var(--window-bottom);
  left: 0;
  right: 0;
  z-index: 11;
  box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
  background: #fff;

  // 设置ios刘海屏底部横线安全区域
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .btn-wrapper {
    height: 120rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
  }

  .btn-item {
    flex: 1;
    font-size: 34rpx;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    color: #fff;
    border-radius: 10rpx;
  }

  .btn-item-main {
    background: linear-gradient(to right, #f9211c, #ff6335);

    // 禁用按钮
    &.disabled {
      background: #ff9779;
    }
  }
}
/deep/.pop-main .uni-list-cell {
  font-size: 30rpx !important;
  padding: 20rpx 20rpx !important;
}
/deep/.pop-header {
  height: 100rpx !important;
  font-size: 36rpx !important;
}
</style>
